<template>
	<view class="studentList">
		<view class="add_btn" @tap="$to(`/pages/index/addStudent/addStudent?type=${activityType}`)">
			<uni-icons type="plus" color="#2E80FE" size="20"></uni-icons>
			<text>{{activityType?'新增成员':'新增学生'}}</text>
		</view>
		<view class="list">
			<block v-for="(v,i) in list" :key="i">
				<liu-swipe-action :index="v.id" @clickItem="clickItem">
					<view class="item" @tap="clickItem" @touchstart="touchStart($event,i)" @touchend="touchEnd">
						<uni-icons type="compose" color="#999999" size="30"></uni-icons>
						<view class="student">
							<view class="">
								<view class="student_name">{{ v.studentName }}</view>
								<view class="gender">
									<text v-if="v.studentGender==1">男</text>
									<text class="girl" v-else>女</text>
								</view>
							</view>
							<view class="identity_card">身份证 {{ v.studentCardId || '' }}</view>
						</view>
						<view class="" @tap.stop="checkStudent(v,i)">
							<uni-icons type="checkbox-filled" color="#2E80FE" size="30" v-if="v.checked"></uni-icons>
							<uni-icons type="circle" color="#999999" size="30" v-else></uni-icons>
						</view>
						<!-- <view class="del_btn" :style="'width:'+v.width+'rpx'" @tap.stop="handleDel(i)">删除</view> -->
					</view>
				</liu-swipe-action>

			</block>
		</view>
		<view class="confirm_btn" v-if="pagetype!=='我的'">
			<view class="" @click="confirmStudent">确认</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectLeft: 0,
				list: [],
				currentIndex: null,
				start_x: 0,
				end_x: 0,
				listData: {
					limit: 10,
					page: 1,
					search: '',
				},
				listTotalPage: 1,
				pagetype: '',
				activityType:''

			};
		},
		onLoad(opt) {
			this.pagetype = opt.pagetype
			this.activityType=opt.activityType;
		},
		onShow() {
			this.getList();
			var arr = uni.getStorageSync('studentIdList');
			if (arr) {
				this.list.forEach(v => {
					arr.forEach(item => {
						if (v.id == item) {
							v.checked = true;
						}
					})
				})

			}
		},
		computed: {
			studentId() {
				const { list } = this;
				var ids = '', arr = [];
				if (list && list.length) {
					list.forEach(v => {
						if (v.checked) {
							if (ids) {
								ids = ids + ',' + v.id;
							} else {
								ids = v.id + ''
							}
							arr.push(v);
						}
					})
					uni.setStorageSync('studentList', arr);
				};
				return ids;
			},
		},
		methods: {
			clickItem() {
				this.list.forEach(item => {
					item.width = 0;
				})
			},
			touchStart(e, index) {
				this.currentIndex = index;
				this.start_x = e.touches[0].pageX;
			},
			touchEnd(e) {
				let end_x = e.changedTouches[0].pageX;
				let start_x = this.start_x;
				if (start_x - end_x > 50) {
					this.$set(this.list[this.currentIndex], 'width', 132)
				}
			},
			handleDel(index) {
				this.$delete(this.list, index)
			},
			checkStudent(item, index) {
				this.$set(this.list[index], 'checked', !item.checked)
			},
			async getList() {
				const res = await this.$api.get('joiner/list', this.listData);
				if (res.code == 200) {
					if (res.data.list && res.data.list.length) {
						res.data.list.forEach(v => {
							v.checked = false;
						})
					}
					if (this.listData.page == 1) {
						this.listTotalPage = res.data.totalPage;
						this.list = res.data.list;

					} else {
						this.list.push(...res.data.list)
					}
				}
			},
			clickItem(e) {
				if (e.id == 1) { // 点击编辑
					this.$to(`/pages/index/addStudent/addStudent?id=${e.index}`)
				} else if (e.id == 2) { // 点击删除
					var that = this;
					uni.showModal({
						title: '温馨提示',
						content: '确认删除当前学生？',
						success: (v) => {
							if (v.confirm) {
								that.delStudent(e.index);
							}
						}
					})
				}
			},
			async delStudent(id) {
				const res = await this.$api.get(`joiner/delete/${id}`);
				if (res.code == 200) {
					this.getList();
					uni.showToast({
						title: '删除成功',
					})
				}
			},
			confirmStudent() {
				if (this.studentId) {
					uni.$emit('studentId', this.studentId);
					// uni.removeStorageSync('studentIdList')
					uni.navigateBack();
				} else {
					uni.showToast({
						title: '请选择参加学生',
						icon: 'none'
					})
				}
			}

		}
	}
</script>

<style lang="scss">
	.studentList {
		padding: 30rpx 20rpx;
		box-sizing: border-box;

		.add_btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 106rpx;
			border-radius: 20rpx;
			background-color: #f7f7f7;
			margin-bottom: 60rpx;

			text {
				font-size: 30rpx;
				line-height: 30rpx;
				font-weight: bold;
				color: #2E80FE;
			}
		}

		.list {
			border-top: 1rpx solid #F5F5F5;

			.item {
				height: 136rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #F5F5F5;

				.student {
					flex: 1;
					margin: 0 26rpx;

					>view {
						display: flex;
						align-items: center;

						.student_name {
							font-size: 30rpx;
							line-height: 30rpx;
							font-weight: bold;
						}

						.gender {
							width: 54rpx;
							height: 34rpx;
							border-radius: 6rpx;
							border: 1rpx solid #E6E6E6;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 24rpx;
							color: #2E80FE;
							margin-left: 32rpx;

							.girl {
								color: #FE2E42;
							}
						}
					}

					.identity_card {
						font-size: 24rpx;
						color: #999999;
						line-height: 24rpx;
						padding-top: 20rpx;
					}
				}

				.del_btn {
					width: 132rpx;
					height: 100%;
					background-color: #ED4730;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					color: #fff;
				}
			}
		}

		.confirm_btn {
			width: 100%;
			padding: 10rpx 26rpx 30rpx;
			box-sizing: border-box;
			background-color: #fff;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 6;

			>view {
				width: 100%;
				height: 94rpx;
				background-color: #2E80FE;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 14rpx;
				text-align: center;
				line-height: 94rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #fff;
			}
		}
	}
</style>